<template>
  <div class="outpatient-diagnosis-tab">
    <h2 class="diagnosis-title">门诊确诊</h2>
    <div class="diagnosis-form-card">
      <div class="diagnosis-label">确诊信息录入：</div>
      <el-form :model="form" label-width="120px" class="diagnosis-form">
        <el-form-item label="诊断结果：">
          <el-input v-model="form.diagnosis" type="textarea" rows="3" placeholder="输入诊断结果判断" />
        </el-form-item>
        <el-form-item label="处理意见：">
          <el-input v-model="form.cure" type="textarea" rows="3" placeholder="输入治疗意见" />
        </el-form-item>
      </el-form>
      <div class="diagnosis-btn-bar">
        <el-button type="primary" @click="handleSubmit">确诊提交</el-button>
        <el-button @click="handleReset">重置输入</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const route = useRoute()
const form = ref({ diagnosis: '', cure: '' })

const handleSubmit = async () => {
  const register_id = route.query.patientId
  if (!register_id) {
    ElMessage.error('未获取到挂号ID')
    return
  }
  if (!form.value.diagnosis) {
    ElMessage.warning('请输入诊断结果')
    return
  }
  if (!form.value.cure) {
    ElMessage.warning('请输入处理意见')
    return
  }
  try {
    await request({
      url: '/medical-records/outpatientDiagnosis',
      method: 'post',
      params: {
        register_id,
        diagnosis: form.value.diagnosis,
        cure: form.value.cure
      }
    })
    ElMessage.success('确诊信息提交成功')
    handleReset()
  } catch (e) {
    ElMessage.error('提交失败: ' + (e.message || '未知错误'))
  }
}

const handleReset = () => {
  form.value.diagnosis = ''
  form.value.cure = ''
}
</script>

<style scoped>
.outpatient-diagnosis-tab {
  padding: 24px;
  background: #f7f9fb;
}
.diagnosis-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #409eff;
}
.diagnosis-form-card {
  background: #fff;
  border-radius: 8px;
  padding: 32px 28px 24px;
  box-shadow: 0 2px 8px rgba(31,58,88,0.08);
  max-width: 900px;
  margin: 0 auto;
}
.diagnosis-label {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 18px;
}
.diagnosis-form {
  margin-bottom: 18px;
}
.diagnosis-btn-bar {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}
</style>
